<template>
  <div class="app-container">
    <div class="filter-container">
      <div class="lz-tips">
        <label>天数:</label>
      </div>
      <el-select
        v-model="dayValue"
        placeholder="全部天数"
        @change="getNoDetection"
      >
        <el-option
          v-for="item in dayOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <div>
      <el-table
        :data="tableData"
        :loading="tableLoading"
        border
      >
        <el-table-column
          prop="userId"
          label="ID"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="userName"
          label="手机号"
          align="center"
        >
        </el-table-column>
        <el-table-column
          property="detectionTime"
          :formatter="formatterTime"
          label="检测时间"
          width="130"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="detectionCount"
          label="检测次数"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="ovuolaTimeCount"
          label="优孕次数"
          align="center"
        >
        </el-table-column>
        <el-table-column
          label="沟通方式"
          align="center"
          width="250"
        >
          <template slot-scope="scope">
            <div
              style="display:inline-block;"
              v-for="(item,index) in scope.row.communicateWay"
              :key="index"
            >
              <span v-if="item == 1">
                &nbsp;电话&nbsp;
              </span>
              <span v-if="item == 2">
                &nbsp;短信&nbsp;
              </span>
              <span v-if="item == 3">
                &nbsp;微信&nbsp;
              </span>
              <span v-if="item == 4">
                &nbsp;App推送&nbsp;
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="查看"
          align="center"
          width="200"
        >
          <template slot-scope="scope">
            <el-button
              @click="goDetail(scope.row)"
              type="text"
              size="small"
            >详情</el-button>

            <el-button
              @click="goMemo(scope.row)"
              type="text"
              size="small"
            >备注</el-button>

            <el-button
              @click="goGraph(scope.row)"
              type="text"
              size="small"
            >曲线</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div
        class="Pagination"
        style="text-align: left;margin-top: 10px;"
      >
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="limit"
          layout="total, prev, pager, next"
          :total="count"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { fetchNoDetection } from "@/api/table";
import format from "date-format";
export default {
  data() {
    return {
      tableData: [],
      tableLoading: false,
      //总页码
      count: 0,
      //单页行数
      limit: 20,
      //页码
      currentPage: 1,
      dayValue: "0",
      dayOptions: [
        {
          value: "0",
          label: "今日"
        },
        {
          value: "2",
          label: "3日"
        },
        {
          value: "6",
          label: "7日"
        },
        {
          value: "14",
          label: "14日"
        }
      ]
    };
  },
  mounted() {
    this.getNoDetection();
  },
  methods: {
    //页码事件
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getNoDetection();
    },
    //去详情
    goDetail(data) {
      this.$router.push({
        path: "/userManage/userList/userDetail",
        query: { t: +new Date(), type: 1, userId: data.userId }
      });
    },
    //去备注
    goMemo(data) {
      this.$router.push({
        path: "/userManage/userList/userMemo",
        query: { t: +new Date(), type: 1, userId: data.userId }
      });
    },
    //新开窗口去曲线图
    goGraph(data) {
      const { href } = this.$router.resolve({
        path: "/userManage/userList/userChart",
        query: { t: +new Date(), type: 1, userId: data.userId }
      });
      window.open(href, "_blank");
    },
    //时间格式化
    formatterTime(row, column) {
      if (row.detectionTime) {
        const newTime = format(
          "yyyy-MM-dd hh:mm:ss",
          new Date(row.detectionTime)
        ).split(" ");
        let time = "";
        time += newTime[0] + "\n" + newTime[1];
        return time;
      } else {
        return "";
      }
    },
    async getNoDetection() {
      this.tableLoading = true;
      const res = await fetchNoDetection({
        pageSize: this.limit,
        pageNo: this.currentPage,
        day: this.dayValue
      });
      this.tableLoading = false;
      this.tableData = [];
      this.count = res.data.total;
      res.data.list.forEach(item => {
        const data = {};
        data.userId = item.userId;
        data.userName = item.userName;
        data.detectionTime = item.detectionTime;
        data.detectionCount = item.detectionCount;
        data.ovuolaTimeCount = item.ovuolaTimeCount;
        data.communicateWay = item.communicateWay;
        this.tableData.push(data);
      });
    }
  }
};
</script>
<style lang="less">
.el-table {
  .cell {
    white-space: pre-line;
  }
}
</style>
